<template>
  <div class="my-address-new-container">
    <Header
      :title="title"
      :clickLeft="goBack"
    />
    <section>
      <CellGroup>
        <Field
          label="联系人"
          placeholder="请输入联系人姓名"
          v-model="form.contact"
        />
        <div class="field">
          <p class="title">性别</p>
          <RadioGroup class="radio-group" v-model="form.gender">
            <Radio name="先生" class="radio">先生</Radio>
            <Radio name="女士" class="radio">女士</Radio>
          </RadioGroup>
        </div>
        <Field
          label="手机号"
          placeholder="请输入联系人手机号"
          maxlength="11"
          v-model="form.mobile"
        />
        <Field
          label="地址"
          right-icon="location-o"
          placeholder="请选择地址"
          v-model="form.address"
          readonly
          @click="getLocation"
          @click-right-icon="getLocation"
        />
        <Field
          label="门牌号"
          placeholder="10号楼503"
          v-model="form.houseNo"
        />
        <div class="field">
          <p class="title">设为默认</p>
          <Checkbox name="1" class="checkbox" v-model="form.isDefault"></Checkbox>
        </div>
      </CellGroup>
    </section>
    <Button type="primary" class="confirm" @click="confirm" :loading="loading">保存</Button>
  </div>
</template>
<script>
import Header from '@/components/Header'
import { Field, CellGroup, RadioGroup, Radio, Button, Checkbox, CheckboxGroup, Toast } from 'vant';
export default {
  components: {
    Header,
    Field,
    CellGroup,
    RadioGroup,
    Radio,
    Button,
    Checkbox,
    CheckboxGroup
  },
  data() {
    return {
      loading: false,
      title: '新增收货地址',
      id: -1,
      form: {
        gender: '',
        address: '',
        houseNo: '',
        mobile: '',
        contact: '',
        isDefault: false
      }
    }
  },
  methods: {
    goBack() {
      this.$route.meta.notKeepAlive = true;
      this.$router.go(-1);
    },
    getLocation() {
      this.$route.meta.notKeepAlive = false;
      this.$router.push('/map/location?type=1')
    },
    confirm() {
      this.loading = true;
      const { form } = this;
      this.$http.my.addressEdit({
        ...form
      }).then((ret) => {
        this.loading = false;
        if (ret.ok === 1) {
          Toast(ret.msg);
          this.goBack();
        } else {
          Toast(ret.msg);
        }
      }).catch((err) => {
        this.loading = false;
        Toast(err);
      })
    }
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.title = '编辑收货地址'
      this.id = id;
      const addressEdit = this.$store.getters.addressEdit;
      this.form = {
        id,
        address: addressEdit.Address,
        contact: addressEdit.Contact,
        mobile: addressEdit.Mobile,
        houseNo: addressEdit.HouseNo,
        latitude: addressEdit.Latitude,
        longitude: addressEdit.Longitude,
        gender: addressEdit.Gender,
        isDefault: addressEdit.IsDefault
      }
    }
  },
  activated() {
    const location = this.$store.getters.addressLocation;
    if (location) {
      this.form.address = location.title;
      this.form.latitude = location.point.lat;
      this.form.longitude = location.point.lng;
    }
  },
}
</script>
<style lang="less" scoped>
section{
  margin: 20px;
  .field{
    color: #323233;
    font-size: 14PX;
    line-height: 24PX;
    background-color: #fff;
    padding: 10PX 15PX;
    display: flex;
    align-items: center;
    .border-bottom(#dedede);
    .title{
      width: 90PX;
    }
    .radio-group{
      display: flex;
      align-items: center;
      .radio{
        margin-right: 40px;
      }
    }
  }
  .van-cell{
    &:after{
      left: 0;
    }
  }
}
.confirm{
  margin: 500px 10% 0;
  width: 80%;
  height: 90px;
  background-color: @maincolor;
}
</style>
